<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>checkbox</title>
    <script type="text/javascript" src="../vendor/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        (function ($) {
            var cache = {};
            $.fn.beautyCheckBox = function (small) {
                var cls = ["beauty_check-box"];
                small ? cls.push("small") : cls.push("big");
                $(this).length == 1 ? wrapInput($(this), cls.join(" ")) : $(this).each(function () {
                    wrapInput($(this), cls.join(" "));
                });
                return $(this);
            };

            $.fn.slideCheckBox = function () {
                $(this).length === 1 ? wrapSlideInput($(this)) : $(this).each(function () {
                    wrapSlideInput($(this));
                });
            };

            function wrapInput($input, cls) {
                var oldId = $input.attr("id") || "beauty_check-box";
                var newId = cacheAndCreateNewId(oldId);
                $input.attr("id", newId);
                $input.wrap("<span class='" + cls + "'></span>").parent().append("<label for='" + newId + "'></label>");
            }

            function wrapSlideInput($input) {
                var oldId = $input.attr("id") || "slide_check-box";
                var newId = cacheAndCreateNewId(oldId);
                $input.attr("id", newId);
                $input.wrap("<span class='slide_check-box'></span>").parent()
                        .prepend("<strong>Yes</strong><strong>No</strong>")
                        .append("<label for='" + newId + "'></label>");
            }

            function cacheAndCreateNewId(oldId) {
                if (cache.hasOwnProperty(oldId)) {
                    cache[oldId] = cache[oldId] + 1;
                } else {
                    cache[oldId] = 0;
                }
                var newId = oldId + cache[oldId];
                return newId;
            }
        })(jQuery);

        $(function () {
            $("#myCheckBox").beautyCheckBox();

            $("#slideCheckbox1").slideCheckBox();
        });
    </script>

    <style>
        .beauty_check-box {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        .beauty_check-box.big {
            width: 17px;
            height: 17px;
        }

        .beauty_check-box.small {
            width: 15px;
            height: 15px;
        }

        .beauty_check-box > label {
            width: 100%;
            height: 100%;
            display: inline-block;
        }

        .beauty_check-box.big > label {
            background: url(../public/checkbox-big.png) center center no-repeat;
        }

        .beauty_check-box.small > label {
            background: url(../public/checkbox-small.png) center center no-repeat;
        }

        .beauty_check-box > input[type='checkbox'],
        .slide_check-box > input[type='checkbox'] {
            position: absolute;
            opacity: 0;
            left: 0;
            top: 0;
        }

        .beauty_check-box.big > input[type='checkbox'] {
            margin: 2px;
        }

        .beauty_check-box.small > input[type="checkbox"] {
            margin: 1px;
        }

        .beauty_check-box.big > input[type='checkbox']:checked ~ label {
            background-image: url("../public/checked-big.png");
        }

        .beauty_check-box.small > input[type='checkbox']:checked ~ label {
            background-image: url("../public/checked-small.png");
        }

        .slide_check-box {
            position: relative;
            display: inline-block;
            overflow: hidden;
            height: 18px;
            width: 60px;
            border-radius: 9px;
            border: 1px solid green;
            background-color: green;
        }

        .slide_check-box > label {
            display: inline-block;
            width: 29px;
            height: 14px;
            border-radius: 7px;
            top: 2px;
            left: 2px;
            background-color: #eee;
            cursor: pointer;
            transition: left .3s ease-in-out;
            position: absolute;
        }

        .slide_check-box > strong {
            width: 28px;
            color: #fff;
            display: inline-block;
        }

        .slide_check-box > strong:first-of-type {
            margin-left: 3px;
        }

        .slide_check-box > input[type='checkbox'] {
            margin: 3px 21px;
        }

        .slide_check-box > input[type='checkbox']:checked ~ label {
            left: 29px;
        }
    </style>
</head>
<body>
<input type="checkbox" id="myCheckBox" checked/>

<input type="checkbox" id="slideCheckbox1" checked/>

    <span class="beauty_check-box small">
        <input type="checkbox" id="bigCheckBox"/>
        <label for="bigCheckBox"></label>
    </span>

    <span class="slide_check-box">
        <strong>Yes</strong>
        <strong>No</strong>
        <input type="checkbox" id="slideCheckbox"/>
        <label for="slideCheckbox"></label>
    </span>
</body>
</html>